<!-- 提示信息 -->
<app-tip [type]="tipType"></app-tip>

<!-- 遮罩 -->
<!--<app-load *ngIf="isLoading"></app-load>-->
<div class="header">
  <div class="left flex" *ngIf="addFoodInfo['of.id']" [routerLink]="'/main/index'"  id="btn-back" [queryParams]="{addOrderId: addFoodInfo['of.id']}">
    <div class="left-icon">
      <i class="fa fa-angle-left back-icon" aria-hidden="true"></i>
    </div>
    <div class="left-name">
      <span class="back-name">返回</span>
    </div>
  </div>

  <div class="left flex" *ngIf="!addFoodInfo['of.id']" [routerLink]="['/main/table/table-list', {mark: 'choose-table'}]">
    <div class="left-icon">
      <i class="fa fa-angle-left back-icon" aria-hidden="true"></i>
    </div>
    <div class="left-name">
      <span class="back-name">返回</span>
    </div>
  </div>
  <div class="center">订单详情</div>
</div>

<div class="main">
  <div class="foot-list" style="margin-top: 3.6em;">
    <div *ngIf="addFoodInfo['of.id']" style="height: 2.5em;line-height: 2.5em;text-align:center;color: #ed980f;
    background-color: #fff0d5;border:1px solid #f7ce8d59;">
      <i class="fa fa-info-circle"></i> 你正在为 {{addFoodInfo.tableClassName}} {{addFoodInfo.tableName}} 加菜
    </div>

    <div *ngIf="tableState" style="font-size:1.2em;height: 2.5em;line-height: 2.5em;text-align:center;color: #ff3860;
    background-color: #fff0d5; border:1px solid #f7ce8d59;">
      <i class="fa fa-info-circle"></i> 你下单的桌台有预定信息&nbsp;&nbsp;&nbsp;<a style="color: #3280fc" [routerLink]="['/main/table/table-reserve']" [queryParams]="{'of.tid': ofTid, state:1}">查看</a>
    </div>
    <div class="title">
      <span style="float: left;padding-left: 1.2em;">已点菜品</span> <span
      style="float: right;padding-right: 1.2em;"><span>x</span> {{countNumber}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;￥{{countPrice | price}}</span>
    </div>
    <div class="food-item1" *ngFor="let v of selectFoodList">
      <div class="food-item1-top">
        <div class="left"><img src="{{v.figure_url}}?x-oss-process=image/resize,w_110,h_80" alt=""></div>
        <div class="center">
          <div class="title-name">
            <span>{{v.name}}</span>
            <div class="isCalledBtn" *ngIf="is_open_called==0" (click)="isOpen1(v)">
              <i class="fa fa-toggle-off" [ngClass]="{'fa-toggle-on':v.is_called==0}"></i>等叫
            </div>
          </div>
          <div class="num">数量：{{v.number}}</div>
        </div>
        <div class="right" style="width: 5.5em;">
          <div class="price" style="position: relative"><span
            style="position: absolute;right: 10px;top:2.7em;color: #f39801;font-size: 1.1em;font-weight: 600">￥{{v.price * v.number | price}}</span>
          </div>
        </div>
      </div>
      <div class="desc" *ngIf="v.practice"><span style="color: #666;">规格：</span>{{v.practice}}</div>
    </div>
  </div>
  <div class="group-list" *ngIf="!addFoodInfo['of.id']">
    <div class="group-item">
      <div class="left" style="flex:1">
      <span style="margin-left: 25px;">用餐人数</span>
      </div>
      <div class="right">
        <input style="outline: none;
  border: none;
  /*width: 100%;*/
  height: 3em;
  background-color: transparent" type="text" placeholder="请输入用餐人数" [(ngModel)]="ofPeopleNum">
      </div>
    </div>
    <div class="group-item">
      <div class="left" style="flex:1">
        <span style="margin-left: 25px;">订单备注</span>
      </div>
      <div class="right">
        <input style="outline: none;
            border: none;
            /*width: 100%;*/
            height: 3em;
            background-color: transparent"
               type="text" placeholder="输入订单备注" [(ngModel)]="orderRemark">
      </div>
    </div>
  </div>
  <div style="padding: 0 1em 1em 1em;margin-top: 1em;">
    <div class="btn-submit" *ngIf="submitType" (click)="submitData()">下单</div>
  </div>
</div>
